<template>
  <div class="MainPage">
    <div class="main-container">
      <WriteLetter v-show="activeType==='write'" :type="props.type"></WriteLetter>
      <ReceiveLetter v-show="activeType==='receive'" :type="props.type"></ReceiveLetter>
    </div>

    <div class="footer">
      <div :class="['button', {'active': activeType === 'write'}]" @click="activeType='write'">写✍</div>
      <div :class="['button', {'active': activeType === 'receive'}]" @click="activeType='receive'">收📨</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, PropType } from 'vue';
import WriteLetter from './WriteLetter.vue';
import ReceiveLetter from './ReceiveLetter.vue';

const props = defineProps({
  type: {
    type: String as PropType<'xyq' | 'cyc'>,
    required: true,
  },
});
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'submit'): void
}>();

const activeType = ref<'write'|'receive'>('write')

onMounted(()=>{

})

defineExpose({
  
})
</script>

<style lang="scss" scoped>
.MainPage {
  height: 100%;
  display: flex;
  flex-direction: column;
  .main-container {
    height: auto;
    flex: 1;
    overflow: scroll;
  }
  .footer {
    flex-shrink: 0;
    display: flex;
    width: 100%;
    justify-content: center;
    color: rgb(56, 56, 56);
    padding: 8px 0;
    .button {
      outline: 2px solid rgb(245, 245, 245);
      border-radius: 4px;
      padding: 6px 12px;
      margin: 0 10px;
      &.active {
        outline: 2px solid #1989fa;
        color: #1989fa;
      }
    }

  }
}
</style>
